<template>
	<!-- 订单信息 -->
	<view class="OrderingInformation public">
		<view class="main">
			<view id="map" v-if="orderStatus.name == '已发货'">
				<Map :riderId="riderId" :place="place"></Map>
			</view>

			<view class="Status">
				<view class="">
					<view class="header" v-show="flag">
						<view class="">
							<!-- 订单配送中 -->
							{{ orderStatus.name }}
						</view>
					</view>
					<view class="footer" v-show="flag && orderStatus.status != -1">
						送达时间：<text>{{ time }}</text>前送达
					</view>
				</view>
			</view>
			<view class="shopNames">
				<view class="shopNames-main">
					<!-- 店铺名称 -->
					<view class="header">
						{{ options.site_name }}
					</view>
					<!-- 订单 -->
					<view class="">
						<view class="title flexjcsb" v-for="item in arr.order_goods" :key="item.order_goods_id">
							<view class="title-left">
								<view class="title-left-image">
									<image :src="$image + item.sku_image" mode=""></image>
								</view>
								<view class="title-left-content">
									<view class="">
										{{ item.goods_name }}
									</view>
									<view class="">
										{{ arr.buyer_message }}
									</view>
								</view>
							</view>
							<view class="title-right">
								<text>x{{ item.num }}</text>
								￥<text>{{ item.price }}</text>
							</view>
						</view>
					</view>
					<!-- 包装费 -->
					<view class="fee flexjcsb" v-if="arr.pack_money != 0">
						<view class="">
							包装费
						</view>
						<view class="fee-right">
							<view class="fee-right-last">
								￥<text>{{ packing }}</text>
							</view>
						</view>
					</view>
					<view class="fee flexjcsb" v-if="arr.delivery_money != 0">
						<view class="">
							配送费
						</view>
						<view class="fee-right">
							<view class="fee-right-last">
								￥<text>{{ arr.delivery_money }}</text>
							</view>
						</view>
					</view>
					<view class="fee flexjcsb" v-if="false">
						<view class="">
							店铺立减
						</view>
						<view class="fee-right">
							<view class="fee-right-last">
								-￥<text>{{ arr.balance_money }}</text>
							</view>
						</view>
					</view>
					<view class="fee flexjcsb" v-if="false">
						<view class="">
							红包优惠券
						</view>
						<view class="fee-right">
							<view class="fee-right-last">
								-￥<text>{{ arr.coupon_money }}</text>
							</view>
						</view>
					</view>
					<!-- 合计 -->
					<view class="amountTo">
						<view class="amountTo-main">
							<view class="">
								已优惠<text>￥{{ preferential }}</text>
							</view>
							<view class="">
								合计 <text>￥</text><text>{{ amountTo }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="OrderNotes">
				<view class="OrderNotes-main">
					<!-- 上部分 -->
					<view class="main-header" v-if="flag">
						<view class="main-item flexjcsb" v-if="orderStatus.status != -1">
							<view class="">
								接单时间
							</view>
							<view class="" v-if="arr.package_list && arr && arr.package_list.delivery_time">
								<!-- 7月13日 12:30-13:00 -->
								{{ arr.package_list.delivery_time | formatTime}}
							</view>
							<view v-else></view>
						</view>
						<view class="main-item flexjcsb">
							<view class="">
								配送地址
							</view>
							<view class="">
								<!-- 信阳师范大学1号宿舍楼403 -->
								{{ arr.address }} {{ arr.house_number }}
							</view>
						</view>
						<view class="main-item flexjcsb">
							<view class="">
								配送服务
							</view>
							<view class="">
								<!-- 校园专送 -->
								{{ arr.delivery_type_name }}
							</view>
						</view>
						<view class="main-item flexjcsb" v-if="package_list == ''">
							<view class="">
								配送骑手
							</view>
							<view class="">
								<!-- {{arr.package_list.deliverer}} -->
								{{ arr.package_list.deliverer }}
							</view>
						</view>
					</view>
					<view class="main-header" v-if="!flag">
						<view class="main-item flexjcsb">
							<view class="">
								自取时间
							</view>
							<view class="">
								{{ arr.buyer_ask_delivery_time | dateTimeFormat || '' }}
							</view>
						</view>
						<view class="main-item flexjcsb">
							<view class="">
								商家地址
							</view>
							<view class="">
								{{ arr.address }} {{ arr.full_address }}
							</view>
						</view>
						<view class="main-item flexjcsb">
							<view class="">
								预留电话
							</view>
							<view class="">
								{{ arr.mobile }}
							</view>
						</view>
					</view>
					<!-- 下部分 -->
					<view class="main-footer">
						<view class="main-item flexjcsb">
							<view class="">
								订单号码
							</view>
							<view class="">
								{{ arr.out_trade_no }}
							</view>
						</view>
						<view class="main-item flexjcsb" v-if="arr.pay_time && arr.pay_time != 0">
							<view class="">
								下单时间
							</view>
							<view class="">
								{{ arr.pay_time | dateTimeFormat }}
							</view>
						</view>
						<view class="main-item flexjcsb" v-if="arr.pay_type_name != ''">
							<view class="">
								支付方式
							</view>
							<view class="">
								<!-- 微信支付 -->
								{{ arr.pay_type_name }}
							</view>
						</view>
						<view class="main-item flexjcsb" v-if="arr.buyer_message != ''">
							<view class="">
								备注
							</view>
							<view class="">
								<!-- 无需餐具 -->
								{{ arr.buyer_message }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="buttonBox">
				<view class="buttonBox-main-shop" v-if="arr.order_status != -1">
					<view class="flexjcc" @click="contactShop(arr)">
						联系商家
					</view>
				</view>
				<view class="buttonBox-main" v-if="arr.order_type_name == '外卖订单'
					&& arr.order_status > 1 && arr.order_status != 4 && arr.order_status != 10">
					<view class="flexjcc" @click="contactTheRider(arr)">
						联系骑手
					</view>
				</view>
				<view class="buttonBox-main" v-if="arr.order_status == 2 && source == 2">
					<view class="flexjcc" @click="PickupCode">
						取餐码
					</view>
				</view>
			</view>
			<u-popup v-model="show" mode="center" border-radius="40">
				<view class="popup-main">
					<view class="popup-title">
						<view class="">
							取餐码
						</view>
						<view class="popup-icon">
							<uni-icons type="closeempty" size="34rpx" @click="popuphide"></uni-icons>
						</view>
					</view>
					<view class="popup-code">
						取餐码：{{ arr.delivery_code }}
					</view>
					<view class="">
						<image :src="$image + arr.code_info.pickup_barcode" mode="" class="QRCodeImgetiao"></image>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import Map from '@/components/Map/index'

const $api = require('@/utils/request.js').API
export default {
	components: {
		Map
	},
	data() {
		return {
			show: false,
			flag: true, //是否骑手配送
			options: [],
			arr: {
				order_goods: [],
				buyer_message: '',
				pack_money: '',
				delivery_money: '',
				delivery_money: '',
				balance_money: '',
				coupon_money: '',
				package_list: {
					delivery_time: '',
					deliverer: '',

				},
				address: '',
				house_number: '',
				delivery_type_name: '',
				buyer_ask_delivery_time: '',
				address: '',
				mobile: '',
				out_trade_no: '',
				pay_time: '',
				pay_type_name: '',
				pay_type_name: '',
				buyer_message: '',
				delivery_code: '',

			},
			orderGoods: [],
			package_list: [],
			orderStatus: [],
			time: '',
			$image: this.$image,
			// 合计
			amountTo: 0,
			// 包装费
			packing: 0,
			source: 0,
			// 骑手id
			riderId: null,
			// 目的地坐标
			place: {
				atitude: 32.14409,
				longitude: 114.04541,
			}
		}
	},
	filters: {
		dateTimeFormat(timestamp) {
			const date = new Date(timestamp * 1000)
			const year = date.getFullYear()
			const month = date.getMonth() + 1
			const day = date.getDate()
			const hours = date.getHours()
			const minutes = date.getMinutes()
			const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`
			return formattedTime
		}
	},
	onLoad(options) {
		this.source = options.source
		this.options = JSON.parse(options.item)
		this.orderDetails()
		this.dateTime()
	},
	computed: {
		preferential() {
			return 0
		},


	},
	methods: {
		orderDetails() {
			$api.postOrderDetails({
				// token: uni.getStorageSync('token'),
				order_id: this.options.order_id
			}).then(res => {
				// console.log(res, '1256');
				this.arr = res.data.data
				this.riderId = res.data.data.delivery_member_id
				this.place.longitude = Number(res.data.data.longitude) || 0
				this.place.latitude = Number(res.data.data.latitude) || 0
				this.orderGoods = res.data.data.order_goods
				this.package_list = res.data.data.package_list
				this.orderStatus = JSON.parse(this.arr.order_status_action)
				this.amountTo = this.count()
				this.packing = this.totalPacking()
				if (res.data.data.order_type == 2) {
					this.flag = false;
				} else {
					this.flag = true;
				}
			})
		},
		AnotherOrder(item) {
			$api.postOrderGoodsPayment({
				out_trade_no: item.out_trade_no,
				pay_type: 'wechatpay',
				is_matched: 0,
			}).then(res => {
				let obj = res.data.data.data
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: obj.timeStamp,
					nonceStr: obj.nonceStr,
					package: obj.package,
					signType: obj.signType,
					paySign: obj.paySign,
					success: function (res) {
						uni.reLaunch({
							url: '../Paymentcompletion/Paymentcompletion?status=' + 1
						})
					},
					fail: function (err) {
						uni.reLaunch({
							url: '../Paymentcompletion/Paymentcompletion?status=' + 2
						})
					}
				})
			})
		},
		// 取餐码
		PickupCode() {
			// this.$refs.popup.open('center')
			this.show = true
		},
		// 联系骑手
		contactTheRider(item) {
			uni.makePhoneCall({
				phoneNumber: item.package_list.deliverer_mobile,
				success: function () {

				},
				fail: function () {

				}
			})
		},
		dateTime() {
			// 当前时间
			const datatime = new Date();
			let month = datatime.getMonth() + 1;
			let day = datatime.getDay();
			let hour = datatime.getHours() + 1;
			let minute = datatime.getMinutes();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			hour = hour > 9 ? hour : '0' + hour;
			minute = minute > 9 ? minute : '0' + minute;
			this.time = `${month}月${day}日(今日)${hour}:${minute}`
		},
		popuphide() {
			this.show = false
		},
		close() {

		},
		// 联系商家
		contactShop(item) {
			uni.makePhoneCall({
				phoneNumber: item.site_info.mobile
			})
		},
		// 计算合计
		count() {
			let num = 0
			this.arr.order_goods.forEach(item => {
				num += Number(item.num * item.price)
				// num += Number((item.num * item.price) + (this.totalPacking())) 
			})
			num = num +  Number(this.totalPacking())
			if(this.arr.delivery_money){
				num+=Number(this.arr.delivery_money)
			}
			
			return num
		},
		
		// 计算包装费
		totalPacking() {
			let num = 0
			// this.arr.order_goods.forEach(item => {
			// 	num += item.num * this.arr.pack_money
			// })
			if(this.arr && this.arr.pack_money){
				num = this.arr.pack_money
			}
			return num
		},
	}
}
</script>

<style lang="less" scoped>
.OrderingInformation {
	background: #FBFBFB;

	.main {
		width: 702rpx;
		margin: auto;
	}

	#map {
		height: 300px;

	}

	// 订单状态
	.Status {
		.header {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F14500;

			view:first-child {
				padding-top: 34rpx;
			}

			view:last-child {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F14500;
				padding: 16rpx 0;
				padding-top: 0;
			}
		}

		.footer {
			padding-bottom: 25rpx;

			text {
				padding-right: 15rpx;
			}
		}
	}

	// 店铺名称
	.shopNames {
		width: 702rpx;
		// height: 491rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118, 118, 118, 0.09);
		border-radius: 10rpx;
		padding-bottom: 20rpx;

		.shopNames-main {
			padding: 0 30rpx 0 27rpx;
		}

		// 店铺名称
		.header {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4A4A4A;
			padding: 28rpx 0 33rpx 0;
		}

		// 订单
		.title {
			.title-left {
				display: flex;

				.title-left-image {
					image {
						width: 102rpx;
						height: 102rpx;
						border-radius: 10rpx;
					}
				}

				.title-left-content {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #898989;
					padding-left: 19rpx;

					view:first-child {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						padding-bottom: 35rpx;
					}
				}
			}

			.title-right {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #898989;

				text:first-child {
					padding-right: 43rpx;
				}

				text:last-child {
					font-size: 30rpx;
				}
			}
		}

		// 费
		.fee {
			height: 55rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #202020;

			.fee-right {
				display: flex;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;

				.fee-right-first {
					color: #878787;
					text-decoration: line-through;
					padding-right: 20rpx;
				}

				.fee-right-last {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F14500;

					text {
						font-size: 30rpx;
					}
				}
			}
		}

		// 合计
		.amountTo {
			display: flex;
			justify-content: flex-end;
			padding-top: 10rpx;

			.amountTo-main {
				display: flex;
				align-items: center;
				align-items: baseline;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #9B9B9B;

				view:first-child {
					text {
						color: #F25F40;
						padding-right: 15rpx;
					}
				}

				view:last-child {
					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #2B2B2B;
					}

					text:last-child {
						font-size: 36rpx;
					}
				}
			}
		}
	}

	// 订单备注
	.OrderNotes {
		width: 702rpx;
		// height: 492rpx;
		// height: 520rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(118, 118, 118, 0.09);
		border-radius: 10rpx;
		margin-top: 12rpx;
		padding-bottom: 20rpx;

		.OrderNotes-main {
			padding: 0 30rpx 0 27rpx;
		}

		// 上部分
		.main-header {
			border-bottom: 1px solid #EDEDED;
			padding: 30rpx 0;
		}

		// 下部分
		.main-footer {
			padding-top: 30rpx;
		}

		.main-item {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 52rpx;

			view:first-child {
				color: #959595;

			}

			view:last-child {
				width: 400rpx;
				text-align: right;
				color: #3D3D3D;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.buttonBox {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		font-size: 22rpx;

		.buttonBox-main {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 158rpx;
				height: 60rpx;
				border-radius: 44rpx;
				margin: 28rpx 0;
			}

			view:first-child {
				border: 1px solid #F14500;
				color: #F14500;
				margin-right: 15rpx;
			}

			view:last-child {
				background: #F14500;
				color: white;
			}
		}

		.buttonBox-main-shop {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 158rpx;
				height: 60rpx;
				border-radius: 44rpx;
				margin: 28rpx 0;
			}

			view:first-child {
				border: 1px solid #F14500;
				color: #F14500;
				margin-right: 15rpx;
			}

			view:last-child {
				border: 1px solid #F14500;
				color: #F14500;
			}
		}
	}

	.popup-main {
		position: relative;
		width: 658rpx;
		// height: 653rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		text-align: center;

		.popup-title {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #161415;
			padding: 48rpx 0 45rpx 0;
		}

		.popup-icon {
			position: absolute;
			top: 48rpx;
			right: 45rpx;
		}

		.popup-code {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #7C7C7C;
			padding-bottom: 54rpx;
		}

		.QRCodeImgeer {
			width: 348rpx;
			height: 348rpx;
		}

		.QRCodeImgetiao {
			width: 348rpx;
			height: 160rpx;
		}
	}
}
</style>